import React, { useState, useEffect } from 'react';
import './content.less';
import { formTableApi, activityDeleteIdApi } from '@/api/createActivity.js';
import { history } from 'umi';
import {
  Form,
  Input,
  DatePicker,
  Table,
  Pagination,
  ConfigProvider,
  message,
} from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
// const { RangePicker } = DatePicker;
export default function (props) {
  const [form] = Form.useForm();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [tableData, setTableData] = useState([]);
  const [total, setTatal] = useState(0);
  const [activityName, setActivityName] = useState('');
  const [queryStartDate, setQueryStartDate] = useState('');
  const [queryEndDate, setQueryEndDate] = useState('');
  const [gmtCreated, setGmtCreated] = useState('');
  const [isDraft, setIsDraft] = useState('');

  useEffect(() => {
    console.log(props.tellSome);
    setPage(1);
    if (props.tellSome[0] == 8) {
      getTableData(pageSize, page);
    } else if (props.tellSome[0] == 7) {
      getTableData(
        pageSize,
        page,
        activityName,
        queryStartDate,
        queryEndDate,
        null,
        1,
        gmtCreated,
      );
    } else {
      getTableData(
        pageSize,
        page,
        activityName,
        queryStartDate,
        queryEndDate,
        props.tellSome,
        isDraft,
        gmtCreated,
      );
    }
  }, [props.tellSome[0]]);

  const getTableData = async (
    pageSize = 10,
    page = 1,
    activityName,
    queryStartDate,
    queryEndDate,
    activityStatus,
    isDraft,
    gmtCreated,
  ) => {
    const res = await formTableApi({
      page,
      pageSize,
      activityName,
      queryStartDate,
      queryEndDate,
      activityStatus,
      isDraft,
      gmtCreated,
    });
    // console.log(res)

    let arr = res.data.data.rows.map((item) => ({
      ...item,
      key: item.id,
      activityTime: item.startDate + '~' + item.endDate,
    }));
    console.log(arr);
    setTableData(arr);
    setTatal(res.data.data.total);
  };

  function searchClick() {
    setPage(1);
    getTableData(
      pageSize,
      1,
      activityName,
      queryStartDate,
      queryEndDate,
      props.tellSome,
      isDraft,
      gmtCreated,
    );
    console.log(page);
  }

  function cancelClick() {
    form.resetFields();
    setActivityName('');
    setGmtCreated('');
  }

  function inputChange(e) {
    setActivityName(e.target.value);
    console.log(e.target.value);
  }

  function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
    setGmtCreated(dateString);
  }

  // function onOk(e, value) {
  //   console.log('onOk: ', e, value);
  // }
  function pageClick(page, pageSize) {
    setPage(page);
    setPageSize(pageSize);
    getTableData(
      pageSize,
      page,
      activityName,
      queryStartDate,
      queryEndDate,
      props.tellSome,
      isDraft,
      gmtCreated,
    );
  }

  const columns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreated',
      key: 'gmtCreated',
    },
    {
      title: '活动时间',
      dataIndex: 'activityTime',
      key: 'activityTime',
    },
    {
      title: '状态',
      key: 'activityStatus',
      dataIndex: 'activityStatus',
      render: ({ _: any }, { isDraft, activityStatus }) => {
        console.log(activityStatus, '------');
        return (
          <div>
            {isDraft
              ? '草稿'
              : activityStatus == 1
              ? '待审核'
              : activityStatus == 2
              ? '进行中'
              : activityStatus == 3
              ? '未开始'
              : activityStatus == 4
              ? '已驳回'
              : activityStatus == 5 || 6
              ? '已结束'
              : ''}
          </div>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'activityStatus',
      key: 'activityStatus',
      render: ({ _: any }, { id, activityBasicId }) => {
        return (
          <div style={{ display: 'flex' }}>
            <div
              style={{
                color: '#4ea3ff',
                cursor: 'pointer',
                marginRight: '5px',
              }}
              onClick={() => {
                history.push({
                  pathname: '/home/createActivity/activityDetail',
                  state: { activityBasicId: activityBasicId },
                });
              }}
            >
              详情
            </div>
            <div
              style={{
                marginRight: '5px',
                cursor: 'pointer',
                color: '#4ea3ff',
              }}
              onClick={() => {
                history.push({
                  pathname: '/home/createActivity/addCreateActivity',
                  state: { activityBasicId: activityBasicId },
                });
              }}
            >
              编辑
            </div>
            <div
              style={{
                cursor: 'pointer',
                color: '#4ea3ff',
              }}
              onClick={async () => {
                const res1 = await activityDeleteIdApi({
                  activityBasicIds: [activityBasicId],
                });
                // console.log(res1.data.code);
                // let a = tableData.filter((item) => {
                //   return item.id !== id;
                // });
                // setTableData(a);
                // console.log(a);
                if (res1.data.code == 200) {
                  let a = tableData.filter((item) => {
                    return item.id !== id;
                  });
                  setTableData(a);
                } else {
                  message.info(res1.data.message);
                  // console.log(res1.data.message);
                }
              }}
            >
              删除
            </div>
          </div>
        );
      },
    },
  ];
  return (
    <div>
      <Form form={form}>
        <div className="content-all">
          <div className="content-input">
            <Form.Item
              label="活动名称"
              name="activityName"
              style={{
                marginRight: '25px',
              }}
            >
              {/* <div className='input-text'>活动名称:</div> */}
              <Input
                placeholder="请输入活动名称"
                className="input-choose"
                onChange={inputChange}
              />
            </Form.Item>
            <ConfigProvider locale={zh_CN}>
              <Form.Item label="创建时间" name="createTime">
                {/* <div className='time-text'>创建时间:</div> */}

                <DatePicker showTime onChange={onChange} />
              </Form.Item>
            </ConfigProvider>
          </div>
          <div className="content-btn">
            <div className="btn1" onClick={searchClick}>
              搜&nbsp;索
            </div>
            <div className="btn2" onClick={cancelClick}>
              重&nbsp;置
            </div>
          </div>
        </div>
        <div
          className="btn3"
          onClick={() => {
            history.push({
              pathname: '/home/createActivity/addCreateActivity',
            });
          }}
        >
          创建活动
        </div>
      </Form>

      {/* table*/}
      <div>
        <Table pagination={false} columns={columns} dataSource={tableData} />
        <ConfigProvider locale={zh_CN}>
          <Pagination
            showQuickJumper
            current={page}
            total={total}
            onChange={pageClick}
            style={{
              textAlign: 'right',
              marginTop: '15px',
            }}
          />
        </ConfigProvider>
      </div>
    </div>
  );
}
